<template>
  <div class="table-list">
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; height: 100%"
      border
      tooltip-effect="light"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column> -->
      <el-table-column width="60" property="ID" label="ID" />
      <el-table-column
        property="标题"
        label="标题"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column property="内容" label="内容" show-overflow-tooltip />
    </el-table>
  </div>

  <div class="pagination-list">
    <div>
      <el-button type="primary" style="margin-left: 10px" @click="submit"
        >立即提交</el-button
      >
      <!-- <el-button
        type="primary"
        style="margin-left: 10px"
        @click="gotoFileImport"
        >文件导入</el-button
      > -->
    </div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 50, 60, 70, 80, 90, 100, 200, 300, 500, 1000, 2000, 5000, 10000]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <div>
    <el-drawer v-model="drawer" title="确认">
      <div>选择的总条数：{{ multipleSelection.length }}</div>
      <el-divider border-style="dashed" />
      <div>功能：将2条数据合并为一条</div>
      <el-divider border-style="dashed" />
      <span>分类ID（选填）：</span>
      <el-input
        v-model="cardId"
        placeholder="请输入分类ID"
        style="width: 200px"
      />
      <el-divider border-style="dashed" />
      <div class="demo-drawer__footer">
        <el-button @click="drawer = false">取消合并</el-button>
        <el-button type="primary" @click="mergeData" :disabled="btnDisabled"
          >立即合并</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import { ElTable } from "element-plus";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import { ElMessage } from "element-plus";
import localForage from "localforage";

const props = defineProps({
  dataName: {
    type: String,
    default: "",
  },
  sendDataName: {
    type: String,
    default: "",
  },
});

const route = useRoute();
const router = useRouter();

interface User {
  date: string;
  标题: string;
  内容: string;
  [x: string]: any;
}

const currentPage4 = ref(1);
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
let tableData = ref();
let total = ref(0);
let getData = ref();
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const drawer = ref(false);
let btnDisabled = ref(false);
const cardId = ref<number>();

// 表格数据勾选的总条数
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const handleSizeChange = (val: number) => {
  currentPage4.value = 1;
  tableData.value = getData.value.slice(0, val);
};
const handleCurrentChange = (val: number) => {
  tableData.value = getData.value.slice(
    (val - 1) * pageSize4.value,
    val * pageSize4.value
  );
};

const submit = () => {
  if (!multipleSelection.value.length) {
    return ElMessage({
      type: "error",
      message: "请选择表格中的数据",
    });
  }
  drawer.value = true;
  btnDisabled.value = false;
};

const gotoFileImport = () => {
  router.go(-1);
};

// 数据合并
const mergeData = () => {
  const data = multipleSelection.value;
  if (data.length % 2 !== 0) {
    return ElMessage({
      type: "error",
      message: "选中的数据条数必须为偶数",
    });
  }
  const result = [];
  for (let i = 0; i < data.length; i += 2) {
    let b = i;
    const newObj = {
      ID: cardId.value || Number(data[b].ID),
      标题: data[b].标题 + "_" + data[b + 1].标题,
      内容:
        `<div style="width: 100%;
        height: 76px;
        background-color: #cff9f6;
        border-radius: 10px;
        color: #12c3b6;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
        line-height: 76px;
        margin: auto;
        "
        >宠物知识</div><br />${data[b].标题};${
          data[b + 1].标题
        }；下面就由我给大家讲解一下吧，详情如下：(xinxi00宠物网)<br />` +
        `&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: 600">一、${data[b].标题}</span>` +
        `<br />` +
        data[b].内容 +
        `<br />` +
        `&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: 600">二、${
          data[b + 1].标题
        }</span>` +
        `<br />` +
        data[b + 1].内容,
    };
    result.push(newObj);
  }
  if (result.length) {
    ElMessage({
      type: "success",
      message: "数据合并成功，点击左侧（数据发布）菜单进行查看",
    });
    drawer.value = false;
    btnDisabled.value = true;
    localForage.setItem(
      props.sendDataName,
      encodeURIComponent(JSON.stringify(result))
    );
  }
};

onMounted(async () => {
  // 获取本地存储 IndexedDB 的值
  const IndexedDBData = await localForage.getItem(props.dataName);
  getData.value = JSON.parse(decodeURIComponent(IndexedDBData as string));
  tableData.value = getData.value.slice(0, 10);
  total.value = getData.value.length;
});

onBeforeUnmount(() => {
  localForage.removeItem(props.dataName);
});
</script>

<style scoped>
.table-list {
  width: 100%;
  height: 100%;
  max-height: calc(100% - 60px);
  /* overflow-y: scroll; */
}
.pagination-list {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background-color: #f4f4f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
